Правило CSS @property: розкриваємо потенціал визначення типів користувацьких властивостей

Світ CSS постійно розвивається, і одним з найновіших та найпотужніших доповнень є правило @property. Це правило надає механізм для визначення типів користувацьких властивостей, забезпечуючи більший контроль та гнучкість у вашому CSS і відкриваючи двері до більш складних анімацій, розширених можливостей для створення тем та загалом більш надійної архітектури CSS. У цій статті ми глибоко зануримося в правило @property, дослідимо його синтаксис, можливості та практичне застосування, пам'ятаючи про глобальну аудиторію.

Що таке користувацькі властивості CSS (змінні)?

Перш ніж зануритися у правило @property, важливо зрозуміти користувацькі властивості CSS, також відомі як змінні CSS. Користувацькі властивості дозволяють визначати значення, які можна повторно використовувати у вашому CSS, роблячи таблиці стилів легшими для підтримки та оновлення. Вони оголошуються за допомогою синтаксису --variable-name та доступні за допомогою функції var().

Приклад:

:root {
  --primary-color: #007bff; /* Глобально визначений основний колір */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

У цьому прикладі --primary-color та --secondary-color є користувацькими властивостями. Якщо вам потрібно змінити основний колір на всьому вашому вебсайті, вам потрібно оновити його лише в одному місці – у селекторі :root.

Обмеження базових користувацьких властивостей

Хоча користувацькі властивості є неймовірно корисними, вони мають суттєве обмеження: по суті, вони розглядаються як рядки. Це означає, що CSS не знає за замовчуванням, який тип значення містить користувацька властивість (наприклад, число, колір, довжина). Хоча браузер намагається визначити тип, це може призвести до несподіваної поведінки, особливо коли мова йде про анімації та переходи. Наприклад, спроба анімувати користувацьку властивість, що містить колір, може не спрацювати належним чином або працювати непослідовно в різних браузерах.

Представляємо правило @property

Правило @property вирішує це обмеження, дозволяючи вам явно визначати тип, синтаксис, початкове значення та поведінку успадкування користувацької властивості. Це забезпечує набагато надійніший та передбачуваніший спосіб роботи з користувацькими властивостями, особливо при їх анімації або переходах.

Синтаксис правила @property

Базовий синтаксис правила @property виглядає так:

@property --property-name {
  syntax: ;
  inherits: ;
  initial-value: ;
}

Розглянемо кожну частину правила:

• --property-name: Це назва користувацької властивості, яку ви визначаєте. Вона повинна починатися з двох дефісів (--).
• syntax: Це визначає очікуваний тип значення користувацької властивості. Це рядок, який описує допустимі значення для користувацької властивості. Поширені значення синтаксису включають:
• *: Відповідає будь-якому значенню. Це значення за замовчуванням, якщо синтаксис не вказано. Використовуйте це обережно, оскільки це обходить перевірку типів.
• <color>: Відповідає будь-якому дійсному значенню кольору CSS (наприклад, #ff0000, rgb(255, 0, 0), red).
• <length>: Відповідає будь-якому дійсному значенню довжини CSS (наприклад, 10px, 2em, 50%).
• <number>: Відповідає будь-якому числовому значенню (наприклад, 1, 3.14, -2.5).
• <integer>: Відповідає будь-якому цілочисельному значенню (наприклад, 1, -5, 0).
• <angle>: Відповідає будь-якому значенню кута (наприклад, 45deg, 0.5rad, 100grad).
• <time>: Відповідає будь-якому значенню часу (наприклад, 1s, 500ms).
• <percentage>: Відповідає будь-якому відсотковому значенню (наприклад, 50%, 100%).
• <image>: Відповідає будь-якому значенню зображення (наприклад, url(image.jpg), linear-gradient(...)).
• <string>: Відповідає будь-якому рядковому значенню (взятому в подвійні або одинарні лапки).
• Ви також можете комбінувати дескриптори синтаксису за допомогою |, щоб дозволити кілька типів (наприклад, <length> | <percentage>).
• Ви можете використовувати регулярні вирази для визначення більш складного синтаксису. Це використовує загальносистемні ключові слова CSS inherit, initial, unset, та revert як допустимі значення, якщо синтаксис їх вказує, навіть якщо не зазвичай дозволено для цього типу синтаксису. Приклад: '\d+px' дозволяє значення типу '10px', '200px', але не '10em'. Зверніть увагу на подвійне екранування зворотної косої риски.
• inherits: Це логічне значення (true або false), яке вказує, чи повинна користувацька властивість успадковувати своє значення від батьківського елемента. Значення за замовчуванням — false.
• initial-value: Це визначає початкове значення користувацької властивості. Це значення, яке властивість матиме, якщо воно не буде явно встановлено для елемента. Важливо надати дійсне початкове значення, яке відповідає визначеному syntax. Якщо початкове значення не надано, і властивість не успадковується, її початковим значенням буде недійсне значення властивості.

Практичні приклади правила @property

Розглянемо кілька практичних прикладів, щоб проілюструвати, як правило @property можна використовувати в реальних сценаріях.

Приклад 1: Анімація користувацького кольору

Анімація кольорів за допомогою стандартних переходів CSS іноді може бути складною. Правило @property значно спрощує це.

@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* Зміна на зелений колір при наведенні */
}

У цьому прикладі ми визначаємо користувацьку властивість під назвою --brand-color і вказуємо, що її синтаксис — <color>. Ми також встановлюємо початкове значення #007bff (відтінок синього). Тепер, коли на .element наводять курсор, колір фону плавно переходить від синього до зеленого.

Приклад 2: Анімація користувацької довжини

Анімація довжин (наприклад, ширина, висота) — ще один поширений випадок використання правила @property.

@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

Тут ми визначаємо користувацьку властивість під назвою --element-width і вказуємо, що її синтаксис — <length>. Початкове значення встановлено на 100px. Коли на .element наводять курсор, його ширина плавно переходить від 100px до 200px.

Приклад 3: Створення користувацького індикатора прогресу

Правило @property можна використовувати для створення користувацьких індикаторів прогресу з більшим контролем над анімацією.

@property --progress {
  syntax: <number>;
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

У цьому прикладі ми визначаємо користувацьку властивість під назвою --progress, яка представляє відсоток прогресу. Потім ми використовуємо функцію calc() для обчислення ширини індикатора прогресу на основі значення --progress. Встановлюючи атрибут data-progress на елементі .progress-bar, ми можемо контролювати рівень прогресу.

Приклад 4: Створення тем за допомогою користувацьких властивостей

Правило @property покращує створення тем, забезпечуючи більш надійну та передбачувану поведінку при переході між різними темами. Розглянемо наступний приклад для простого перемикача темної/світлої теми:

@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* Світла тема за замовчуванням */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* Світла тема за замовчуванням */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* Темна тема */
    --text-color: #ffffff;
}

Визначаючи --bg-color та --text-color за допомогою правила @property, перехід між темами буде плавнішим та надійнішим у порівнянні з використанням базових користувацьких властивостей без визначених типів.

Сумісність з браузерами

Станом на кінець 2023 року підтримка правила @property браузерами загалом хороша в сучасних браузерах, включаючи Chrome, Firefox, Safari, та Edge. Однак, завжди варто перевіряти останню інформацію про сумісність на таких сайтах, як Can I Use (caniuse.com), щоб переконатися, що ваша цільова аудиторія має достатню підтримку цієї функції.

Якщо вам потрібно підтримувати старіші браузери, які не підтримують правило @property, ви можете використовувати виявлення функцій за допомогою JavaScript та надавати резервні рішення. Наприклад, ви можете використовувати JavaScript для виявлення, чи підтримує браузер CSS.registerProperty (JavaScript API, пов'язаний з @property), а потім застосовувати альтернативні стилі, якщо він не підтримується.

Найкращі практики використання правила @property

Ось кілька найкращих практик, які слід пам'ятати при використанні правила @property:

• Ретельно визначайте синтаксис: Обирайте найбільш відповідне значення синтаксису для вашої користувацької властивості. Це допоможе уникнути помилок і забезпечить очікувану поведінку вашого CSS.
• Надавайте початкові значення: Завжди надавайте initial-value для ваших користувацьких властивостей. Це гарантує, що властивість матиме дійсне значення, навіть якщо воно не встановлено явно для елемента.
• Враховуйте успадкування: Ретельно подумайте, чи повинна ваша користувацька властивість успадковувати своє значення від батьківського елемента. У більшості випадків краще встановити inherits на false, якщо у вас немає конкретної причини вмикати успадкування.
• Використовуйте описові назви властивостей: Обирайте описові назви для ваших користувацьких властивостей, які чітко вказують на їх призначення. Це зробить ваш CSS більш читабельним та легким для підтримки. Наприклад, замість --color, використовуйте --primary-button-color.
• Ретельно тестуйте: Тестуйте ваш CSS у різних браузерах та на різних пристроях, щоб переконатися, що він працює як очікувалося. Звертайте особливу увагу на анімації та переходи, оскільки це ті області, де правило @property може мати найбільший вплив.
• Документуйте свій код: Додавайте коментарі до вашого CSS, щоб пояснити призначення ваших користувацьких властивостей та як вони використовуються. Це полегшить розуміння вашого коду іншим розробникам (і вам у майбутньому).

Міркування щодо доступності

При використанні правила @property важливо враховувати доступність. Переконайтеся, що ваші анімації та переходи не є надто відволікаючими або дезорієнтуючими для користувачів з когнітивними порушеннями. Уникайте використання анімацій, які блимають або стробують, оскільки вони можуть викликати напади у деяких людей.

Також, переконайтеся, що ваш вибір кольорів забезпечує достатній контраст для користувачів з вадами зору. Ви можете використовувати такі інструменти, як WebAIM Contrast Checker, щоб перевірити, чи відповідають ваші комбінації кольорів рекомендаціям щодо доступності.

Глобальні аспекти

При розробці вебсайтів та додатків для глобальної аудиторії важливо враховувати культурні відмінності та локалізацію. Ось деякі речі, які слід пам'ятати при використанні правила @property у глобальному контексті:

• Напрямок тексту: Пам'ятайте про напрямок тексту (зліва направо проти справа наліво), коли використовуєте користувацькі властивості для керування макетом або позиціонуванням. Використовуйте логічні властивості (наприклад, margin-inline-start замість margin-left), щоб ваш макет правильно адаптувався до різних напрямків тексту.
• Формати чисел та дат: Пам'ятайте про різні формати чисел та дат, що використовуються в різних країнах. Уникайте жорсткого кодування конкретних форматів у вашому CSS і натомість покладайтеся на форматування браузера за замовчуванням або використовуйте JavaScript для форматування чисел та дат відповідно до локалі користувача.
• Символізм кольорів: Пам'ятайте, що кольори можуть мати різне значення в різних культурах. Уникайте використання кольорів, які можуть вважатися образливими або недоречними в певних культурах.
• Підтримка мов: Переконайтеся, що ваші користувацькі властивості правильно працюють з різними мовами. Тестуйте свій вебсайт з різними мовами, щоб виявити будь-які потенційні проблеми.

Майбутнє користувацьких властивостей CSS та правила @property

Правило @property є значним кроком вперед в еволюції CSS. Оскільки підтримка браузерами продовжує покращуватися, ми можемо очікувати ще більш інноваційних застосувань цієї потужної функції. У майбутньому, ми можемо побачити додавання нових значень синтаксису до правила @property для підтримки більш складних типів даних, таких як масиви та об'єкти. Ми також можемо побачити кращу інтеграцію з JavaScript, що дозволить розробникам динамічно створювати та маніпулювати користувацькими властивостями під час виконання.

Комбінація користувацьких властивостей та правила @property прокладає шлях до більш модульної, підтримуваної та потужної архітектури CSS. Використовуючи ці функції, розробники можуть створювати більш складні та захоплюючі веб-досвіди, доступні для користувачів у всьому світі.

Висновок

Правило @property надає веб-розробникам можливість визначати типи користувацьких властивостей, відкриваючи нові можливості для анімацій, створення тем та загальної архітектури CSS. Розуміючи його синтаксис, можливості та найкращі практики, ви можете використовувати цю потужну функцію для створення більш надійних, підтримуваних та візуально привабливих веб-додатків. Оскільки підтримка браузерами продовжує зростати, правило @property, безсумнівно, стане важливим інструментом у наборі сучасного веб-розробника. Використовуйте цю технологію, експериментуйте з її можливостями та розкрийте весь потенціал користувацьких властивостей CSS.

Додаткові матеріали

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1